<template>
    <div :class="{'tabel-sider-box' : true , border : border}" v-if="showSiders.length">
        <!-- 搜索 -->
        <el-popover placement="left-start" width="400px" trigger="click" v-if="showSiders.includes('search')">
            <div class="title" :style="{ ...titleStyle }">搜索</div>
            <div class="ipt-box">
                <el-input placeholder="请输入内容" v-model="searchValue" @input="changeSearch">
                    <template #prepend>
                        <el-select style="width: 115px" v-model="searchSelect" slot="prepend" placeholder="请选择">
                            <el-option :label="item.label" :value="item.key" v-for="(item, index) in columnList"
                                :key="index"></el-option>
                        </el-select>
                    </template>
                </el-input>
            </div>
            <template #reference>
                <el-icon class="el-icon">
                    <Search />
                </el-icon>
            </template>
        </el-popover>

        <!-- 设置列 -->
        <el-popover placement="left-start" width="400px" trigger="click" v-if="showSiders.includes('column')">
            <div :style="{...titleStyle}">列设置</div>
            <el-checkbox-group v-model="goupList">
                <el-checkbox v-for="(item,index) in columnList" :checked="item.isShow" :key="index" :label="item.label" @change="changeCheckbox(index)" :value="item.label"></el-checkbox>
            </el-checkbox-group>
            <template #reference>
                <el-icon class="el-icon">
                    <Setting />
                </el-icon>
            </template>
        </el-popover>

        <!-- 高度设置 -->
        <el-popover placement="left-start" width="400px" trigger="click" v-if="showSiders.includes('height')">
            <div class="title" :style="{...titleStyle}">表格栏高度设置</div>
            <el-radio-group v-model="radio" @change="changeHeight">
                <el-radio-button v-for="(item,index) in widthList" :key="index" :label="item.label" :value="item.value"></el-radio-button>
            </el-radio-group>
            <template #reference>
                <el-icon class="el-icon">
                    <Operation />
                </el-icon>
            </template>
        </el-popover>
    </div>
</template>
<script setup lang="ts">
import tool from "@/utils";
import { ref, computed, watch } from "vue";
import type { siderInstance } from "../@types";
import { ElMessage } from 'element-plus';
import { Search , Setting , Operation} from '@element-plus/icons-vue'
const props = defineProps({
    column: {
        type: Array<Record<string, any>>,
        default: () => {
            return [];
        },
    },
    list: {
        type: Array<Record<string, any>>,
        default: () => {
            return []
        }
    },
    forceSearch: {
        type: Boolean,
        default: false,
    },
    showSiders: {
        type: Array<siderInstance>,
        default: () => {
            return ['search', 'column', 'height']
        }
    },
    treeProps: {
        type: Object,
        default: () => {
            return {}
        },
    },
    border: {
        type: Boolean,
        default: false
    }
})

const columnList = ref<Array<Record<string, any>>>([]); // 搜索列表
const goupList = ref<Array<Record<string, any>>>([]); // 列数据
const widthList = ref([
    { label: '自动', value: '', },
    { label: '小', value: 'mini', },
    { label: '中', value: 'middle', },
    { label: '大', value: 'max', }
]);
const radio = ref('');
const titleStyle = ref({
    padding: '5px 0',
    'border-bottom': '1px solid #ebeef5',
    'font-size': '14px',
    color: '#606266',
    'margin-bottom': '10px',
});

const searchValue = ref('');
const searchSelect = ref('');
const tableData = ref<Array<Record<string, any>>>([])

const emit = defineEmits(['change', 'changeHeight', 'search'])

watch(() => props.list, (newVal) => {
    if (tableData.value.length) return;
    tableData.value = tool.deepCopy(newVal)
}, {
    deep: true,
    immediate: true
})

/**改变高度*/
const changeHeight = () => {
    let index = widthList.value.findIndex((item) => {
        return item.value === radio.value;
    });
    window.localStorage.setItem("dzs-table-height", widthList.value[index].value);
    emit("changeHeight", widthList.value[index].value);
}

watch(() => props.column, (newVal) => {
    if (!newVal.length) return;
    columnList.value = tool.deepCopy(newVal)
    columnList.value.forEach((item) => {
        item.isShow = true;
    });
    let tableHeight = window.localStorage.getItem("dzs-table-height");
    radio.value = tableHeight ? tableHeight : '';
    searchSelect.value = columnList.value[0].key;
    changeHeight();
}, {
    deep: true,
    immediate: true
})

const returnList = computed(() => {
    return columnList.value.filter((item) => {
        return item.isShow;
    });
})

const changeCheckbox = (index: number) => {
    columnList.value[index].isShow = !columnList.value[index].isShow;
    emit("change", returnList.value);
}
/**搜索*/
const changeSearch = () => {
    if (tableData.value.length > 200 && !props.forceSearch) {
        ElMessage({
            message: "数据量过大，搜索可能会影响性能，已经关闭该功能 如果需要可以使用强制搜索功能！",
            type: "warning"
        });
        return;
    }
    tool.fuzzySearch({
        data: tableData.value,
        key: searchSelect.value,
        value: searchValue.value,
        children: props.treeProps.children || "",
        success: (list) => {
            emit("search", list);
        }
    })
}

</script>
<style scoped lang="scss">
.tabel-sider-box {
    width: 30px;
    height: 100%;
    border-left: 0;
    &.border{
        border: 1px solid #EBEEF5;
    }

    .el-icon {
        padding: 10px 0;
        text-align: center;
        display: block;
        margin: 0 auto;
    }

    .el-icon-s-operation,
    .el-icon-setting {
        color: rgb(124, 124, 124);
        font-size: 20px;
        cursor: pointer;
    }

}

:deep(.el-select .el-input) {
    width: 100px;
}
</style>